/*公共样式*/
a,address,b,big,blockquote,body,center,cite,code,dd,del,div,dl,dt,em,fieldset,font,form,h1,h2,h3,h4,h5,h6,html,i,iframe,img,ins,label,legend,li,ol,p,pre,small,span,strong,u,ul,var{margin:0;padding:0; font-family:"微软雅黑","黑体","宋体";}
ul,ol{ list-style:none;}
a{ text-decoration:none;}
img{ border:none;}
input,textarea{ outline:none;}


/*公共标题*/
h2.title{ font-size:28px; font-weight:100; line-height:1.8em; text-align:center;}


/*头部区域开始*/
.top{ width:100%; height:80px; background:rgba(255,255,255,0.8);/*阴影*/box-shadow:0px 3px 5px rgba(0,0,0,0.1);position:fixed; top:0px; left:0; z-index:100;}
.top_c{ width:1000px; margin:auto; height:100px; position:relative;}
/*logo*/
.logo{ margin-top:10px; float:left;}
/*导航*/
.daohang{ width:750px; height:40px;  position:absolute; bottom:40px; right:0;}
.daohang li{  float:left; height:40px; line-height:40px; text-align:center; margin-right:35px; border-right:# }
.daohang .line{ width:100px; height:4px; background:#fab502; position:absolute; top:40px;left:0;}
.daohang li a{ display:block; color:#5b3717; font-size:16px;   height:40px; line-height:40px; padding:0 5px;}
.daohang li:hover a.on{ color:#fab502;}


/*小屏幕时出现的导航*/
.header .btn{ width:28px; height:29px; cursor:pointer; position:absolute; top:15px; right:15px; display:none;}
.header .btn i{ width:28px; height:3px; background:#666; margin:5px 0; display:block;}


/*海报区域开始*/
.banner .small{ display:none;}





/*服务区域开始*/
.service .con{ margin:0 auto;}
.service .con:after{ content:""; clear:both; display:block;}
.service .box{ width:25%; box-sizing:border-box; float:left; text-align:center;}
.service .icon{  border:1px solid #fab502; border-radius:50%; margin:0 auto; /*过渡*/transition:0.3s; }
.service h3{ font-size:24px; color:#666; font-weight:100; margin:45px auto 25px;}
.service p{ font-size:16px; color:#666; line-height:1.7em;}
.service i{ color:#fab502; /*过渡*/transition:0.3s;}
/*鼠标画上改变背景颜色和图标颜色*/
.service .box:hover .icon{ background:#fab502;}
.service .box:hover i{ color:#fff;}




/*关于我们开始*/
.about{ width:100%; background:url(../images/about_bg.jpg) no-repeat center fixed; text-align:center;}
/*标题*/
.about h2{ color:#fff;}
/*内容*/
.about .con{color:#fff; line-height:1.8em; box-sizing:border-box; opacity:0.8;}
.about .buttons{ font-size:0px; text-align:center;}
.about .buttons a{ width:150px; height:46px; display:inline-block; line-height:46px; color:#fff; font-size:20px; margin:7px; border-radius:5px; transition:0.3s;}
.about .buttons a:nth-child(1){ background:url(../images/jianbian1.jpg) repeat-y 0 0;}
.about .buttons a:nth-child(2){ background:url(../images/jianbian2.jpg) repeat-y 0 0;}
.about .buttons a:hover{ background-position:-150px 0;}


/*展示区域开始*/
.case{ margin:0 auto;}
/*内容*/
.case .con{ margin-top:50px;}
.case ul:after{ display:block; content:""; clear:both;}
.case .con li{ width:33.33%; float:left; font-size:0px; padding:15px;
/*添加padding后，如不想增加宽和高就加上 box-sizing:border-box!*/box-sizing:border-box;}
 					
/*last-child 最后一个*/
.case .con li:last-child{ display:none;}
.case li img{ width:100%; transition:0.3s;}
/*鼠标画上li时图像向上走5像素，并添加一个阴影*/
.case li:hover img{/*阴影*/box-shadow:0 5px 15px rgba(0,0,0,0.2);/*兼容*/-webkit-transform:/*位移*/translate(0,-5px);
-moz-transform:/*位移*/translate(0,-5px); transform:/*位移*/translate(0,-5px); }


/*客户服务开始*/
.customer h2{ margin-bottom:60px;}
.customer .con:after{ content:""; display:block; clear:both;}
.customer .box{float:left;  box-sizing:border-box; text-align:center;}
.customer .box img{ width:100%;}





/*底部区域开始*/

/*底部logo*/
.foot img{ width:100px; position:relative; bottom:-120px; left:50%; margin-left:-50px;}

.foot1{ height:240px; background:url(../images/ft_bg.jpg) no-repeat center; margin-top:20px;}
.foot1 .center{ width:1000px; height:240px; margin:auto; overflow:hidden;}
/*底部的上部分*/
.foot1 .center .s{ width:680px; position:relative; margin:70px auto 0;}
.foot1 .center .s ul{ width:680px; height:110px; border-bottom:1px solid #4F4F4F;}
.foot1 .center .s ul li{ line-height:14px; }
.foot1 .center .s ul a{ display:block;color:#797a7a; font-size:12px; margin-bottom:10px;  }
.foot1 .center .s .con1{ left:10px; width:80px;  position:absolute; top:60px;}
.foot1 .center .s .con2{ position:absolute; top:60px; left:100px; width:80px; }
.foot1 .center .s .con3{ position:absolute; top:60px; left:200px; width:90px; }
.foot1 .center .s .con4{ position:absolute; top:60px; left:300px; width:80px; }
.foot1 .center .s .con5{ position:absolute; top:60px; left:400px; width:80px; }
.foot1 .center .s .con6{ position:absolute; top:60px; left:500px; width:80px; }
.foot1 .center .s .con7{ position:absolute; top:60px; left:600px; width:80px; }
.foot1 .center .s ul li:hover a{ color:#fff;}
/*底部的下部分*/
.foot1 .center .x{ width:680px; height:50px;margin:20px auto; text-align:center; font-size:12px; color:#797a7a; line-height:12px;}
.foot1 .center .x a{color:#797a7a;}
.foot1 .center .x a:hover{ color:#fff;}
/*底部区域结束*/







/*0~992尺寸时的公共头部*/
@media (max-width:992px){
	/*头部区域*/
	.header .con{width:100%; padding:0 15px; box-sizing:border-box;}
	.header .list{ position:absolute; top:60px; left:0; width:100%; background:rgba(255,255,255,0.8); border-top:1px solid #aaa; display:none; }
	.header li{ width:100%;float:none; text-align:center; border-bottom:1px solid #cfcfcf;}
	.header .btn{ display:block;}
}





/*0~768尺寸的显示内容*/
@media (max-width:768px){	
	
	/*服务区域*/
	.service .con{ width:100%;}
	.service .box{ width:50%; padding:0 5px; margin-bottom:40px;}
	.service h2{ margin-bottom:40px;}
	.service h3{ margin:30px auto 15px;}
	.service .icon{ width:100px; height:100px; line-height:100px;}
	.service i{ font-size:50px;}
	.service p{ padding:0 15px;}
	
	/*关于我们*/
	.about{ padding:60px 0 40px; background-image:url(../images/about_bg-small.jpg); background-attachment:scroll;}
	.about .con{ width:100%;  padding:0 3%; margin:30px auto 50px; font-size:16px;}
	.about h2{ padding:0 3%;}
	/*让br换行隐藏*/
	.about h2 br{ display:none;}
	
	/*展示区域*/
	.case{ width:100%; padding:60px 0 40px;}
	.case .con{ margin-top:30px;}
	.case .con li{ width:50%; padding:5px;}
	/*：last-child 最后一个*/
	.case .con li:last-child{ display:block;}
	
	/*客户服务*/
	.customer .con{ width:100%;  margin-top:30px;}
	.customer .box{ width:33.33%;   padding:15px; }
	
	
}





/*768~x尺寸的显示内容*/
@media (min-width:768px){
	/*服务区域*/
	.service{ padding:70px 0 50px;}
	.service .con{ width:100%;}
	.service .box{ padding:0 10px;}
	.service h2{ margin-bottom:40px;}
	.service h3{ margin:40px auto 25px;}
	.service .icon{ width:140px; height:140px; line-height:140px;}
	.service i{ font-size:80px;}
	.service p{ padding:0 15px;}
	
	/*关于我们*/
	.about{ padding:70px 0 50px;}
	.about .con{ width:100%;  padding:0 30px; margin:50px auto 70px;}
	
	/*展示区域*/
	.case{ width:100%; padding:70px 0 50px;}
	.case .con{ margin-top:40px;}
	.case .con li{ padding:10px;}
	
	/*客户服务*/
	.customer .con{ width:100%;  margin-top:30px;}
	.customer .box{ width:25%;   padding:10px; }	
	
}







/*992~x尺寸的显示内容*/
@media (min-width:992px){
	 /*头部区域*/
	.header .con{ width:960px;}	
	
	/*服务区域*/
	.service .con{ width:960px;}

	/*关于我们*/
	.about .con{ width:960px;}
	
	/*展示区域*/
	.case{ width:960px;}
	
	/*客户服务*/
	.customer .con{ width:960px;}
	
	
}







/*1300~x尺寸的显示内容*/
@media (min-width:1300px){
	/*头部区域*/
	.header .con{ width:1200px;}

	/*服务区域*/
	.service{ padding:90px 0 70px;}
	.service h2{ margin-bottom:60px;}
	.service .con{ width:1200px;}
	.service .box{ padding:0 20px;}
	.service .icon{ width:180px; height:180px; line-height:180px;}
	.service .icon i{ font-size:100px;}
	
	/*关于我们*/
	.about{ padding:90px 0 70px;}
	.about .con{ width:1200px; font-size:18px;  padding:0 140px;  margin:80px auto 100px;}
	
	/*展示区域*/
	.case{ width:1200px;  padding:70px 0 80px;}
	.case .con{ margin-top:50px;}
	.case .con li{ width:33.33%; padding:15px;}

	/*客户服务*/
	.customer .con{ width:1200px;  margin:0 auto 70px;}
	.customer .box{ width:16.66%; padding:15px;}
	
}






@media (max-width:768px){
	.banner .big{ display:none;}
	.banner .small{ display:block;}	
	
}


@media (min-width:768px){
	.banner .big{ display:block;}
	.banner .small{ display:none;}	
	
}
